import { useTranslation } from "react-i18next";
import { User2Icon } from "lucide-react";
import { Avatar as ShadcnAvatar, AvatarFallback, AvatarImage } from "../ui/avatar";

interface AvatarProps {
  avatarUrl?: string | null;
  avatarLoading: boolean;
  isEditing: boolean;
  isUploading: boolean;
  onAvatarClick: () => void;
  onImageUpload: (event: React.ChangeEvent<HTMLInputElement>) => void;
  fileInputRef: React.RefObject<HTMLInputElement | null>;
  temporaryAvatarUrl?: string | null;
}

export default function Avatar({
  avatarUrl,
  avatarLoading,
  isEditing,
  isUploading,
  onAvatarClick,
  onImageUpload,
  fileInputRef,
  temporaryAvatarUrl,
}: AvatarProps) {
  const { t } = useTranslation();

  // 优先显示临时头像URL，如果没有则显示正常头像URL
  const displayAvatarUrl = temporaryAvatarUrl || avatarUrl;

  return (
    <div className="flex justify-center">
      <div className="relative">
        {avatarLoading ? (
          // 头像加载中状态
          <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border-2 border-white/20">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-500"></div>
          </div>
        ) : displayAvatarUrl ? (
          // 头像加载成功
          <div
            className={`relative cursor-pointer ${isEditing ? "hover:opacity-80 transition-opacity" : ""
              }`}
            onClick={onAvatarClick}
          >
            <ShadcnAvatar className="w-24 h-24 rounded-full border-2 border-white/20">
              {displayAvatarUrl ? <AvatarImage
                src={displayAvatarUrl}
                alt={t("Profile Picture", {
                  defaultValue: "Profile Picture",
                })}
                className="object-cover"
              /> : null}
              <AvatarFallback className="w-24 h-24 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700">
                <User2Icon className="w-12 h-12 text-gray-500 dark:text-gray-400" />
              </AvatarFallback>
            </ShadcnAvatar>
            {isEditing && (
              <div className="absolute inset-0 bg-black bg-opacity-50 rounded-full flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                <span className="text-white text-sm font-medium">
                  {t("Click to upload", { defaultValue: "点击上传" })}
                </span>
              </div>
            )}
            {isUploading && (
              <div className="absolute inset-0 bg-black bg-opacity-70 rounded-full flex items-center justify-center">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
              </div>
            )}
          </div>
        ) : (
          // 无头像或加载失败
          <div
            className={`avatar-fallback w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border-2 border-white/20 ${isEditing
                ? "cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
                : ""
              }`}
            onClick={onAvatarClick}
          >
            <User2Icon className="w-12 h-12 text-gray-500 dark:text-gray-400" />
            {isEditing && (
              <div className="absolute inset-0 bg-primary rounded-full flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                <span className="text-white text-sm font-medium">
                  {t("Click to upload", { defaultValue: "点击上传" })}
                </span>
              </div>
            )}
            {isUploading && (
              <div className="absolute inset-0 bg-black bg-opacity-70 rounded-full flex items-center justify-center">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
              </div>
            )}
          </div>
        )}
        {/* 隐藏的文件输入 */}
        <input
          type="file"
          ref={fileInputRef}
          onChange={onImageUpload}
          accept="image/*"
          className="hidden"
        />
      </div>
    </div>
  );
}
